<template>
  <view class="balance-rule-page">
    <view class="header-container">
      <view class="header">
        <text class="title">储值规则说明</text>
      </view>

      <view class="content">
        <!-- 一、储值基础规则 -->
        <view class="section">
          <text class="section-title">一、储值基础规则</text>
          <view class="section-content">
            <text class="subsection-title">a.使用范围：</text>
            <text>账户余额可用于支付本小程序内所有支持储值支付的商品和服务。</text>
            
            <text class="subsection-title">b.支付方式：</text>
            <text>在结算时，选择"余额支付"即可使用储值金额进行抵扣。</text>
            
            <text class="subsection-title">c.如遇订单退款：</text>
            <text>款项将按原支付路径退回（储值支付部分返还至账户余额）</text>
            
            <text class="subsection-title">d.账户被盗用：</text>
            <text>时需24小时内申诉冻结，经核实后恢复损失余额。</text>
          </view>
        </view>

        <!-- 二、关于退款 -->
        <view class="section">
          <text class="section-title">二、关于退款</text>
          <view class="section-content">
            <text class="subsection-title">a.退款申请：</text>
            <text>我们支持储值余额的退款。如您需要退款，请通过小程序内的客服通道联系我们的工作人员申请。</text>
            
            <text class="subsection-title">b.退款流程：</text>
            <text>我们将在收到申请后的 1-3个工作日 内为您处理。具体到账时间以支付渠道为准。</text>
            
            <text class="subsection-title">c.退款条件：</text>
            <text>申请退款时，您的账户需经过身份验证。如有任何异常或争议交易，需待我们核实后方可处理。</text>
            
            <text class="subsection-title">d.账户注销：</text>
            <text>账户注销时，未消费余额视为自动放弃。</text>
          </view>
        </view>

        <!-- 三、重要须知 -->
        <view class="section">
          <text class="section-title">三、重要须知</text>
          <view class="section-content">
            <text class="subsection-title">a.禁止提现：</text>
            <text>储值金额仅可用于消费，不支持提现至银行卡或支付账户。</text>
            
            <text class="subsection-title">b.禁止转账：</text>
            <text>账户余额是您个人的消费凭证，无法转让、赠与或转售给其他用户。</text>
            
            <text class="subsection-title">c.余额有效期：</text>
            <text>您的储值余额长期有效，请放心使用。</text>
            
            <text class="subsection-title">d.规则变更：</text>
            <text>我们有权根据法律法规或运营需要对本规则进行调整，并通过小程序公告等方式通知您。</text>
            
            <text class="subsection-title">e.规则的解释权：</text>
            <text>平台保留对规则的解释权，重大调整将提前7天公告通知。</text>
            
            <text class="subsection-title">f.账户安全：</text>
            <text>用户需妥善保管账户信息，非系统故障导致的盗刷损失平台不承担责任</text>
          </view>
        </view>

        <!-- 温馨提示 -->
        <view class="warm-reminder">
          <text class="subsection-title">温馨提示：</text>
          <text class="reminder-text">储值消费让您的体验更加便捷。如果您对以上规则有任何疑问，欢迎随时通过 【客服电话：  400-698-9967】 与我们联系。</text>
          <text class="reminder-text">感谢您的理解与支持！</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'BalanceRule',
  data() {
    return {}
  }
}
</script>

<style>
.balance-rule-page {
  padding: 30rpx;
  background-color: #F8F8F8;
  min-height: 100vh;
}

.header-container {
  background-color: #fff;
  border-radius: 16rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
}

.header {
  padding: 40rpx 0;
  text-align: center;
  border-bottom: 1rpx solid #f0f0f0;
}

.title {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
}

.content {
  padding: 40rpx 30rpx;
}

.section {
  margin-bottom: 50rpx;
}

.section:last-child {
  margin-bottom: 0;
}

.section-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 24rpx;
  display: block;
}

.section-content {
  padding-left: 0;
}

.section-content text {
  display: block;
  font-size: 28rpx;
  color: #666;
  line-height: 1.6;
  margin-bottom: 16rpx;
}

.subsection-title {
  font-weight: bold !important;
  color: #333 !important;
  margin-top: 20rpx !important;
  margin-bottom: 8rpx !important;
}

/* 温馨提示样式 */
.warm-reminder {
  background-color: #f8f9fa;
  border-radius: 12rpx;
  padding: 30rpx;
  margin-top: 40rpx;
  text-align: center;
}

.reminder-text {
  display: block;
  font-size: 26rpx;
  color: #666;
  line-height: 1.6;
  margin-bottom: 12rpx;
}

.phone-number {
  display: block;
  font-size: 32rpx;
  font-weight: bold;
  color: #007AFF;
  margin: 16rpx 0;
}
</style>
